<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <link rel="stylesheet" href="${ctx }/res/css/main.css">
    <link rel="stylesheet" href="${ctx }/res/css/plugins.css">
    <link rel="stylesheet" href="${ctx }/res/hplus/js/plugins/layer/skin/layer.css">
    <title>软装到家</title>
    <style type="text/css">
    	.form-groups .form-input.upload {
	      background: url("${ctx}/res/img/icon/upload.jpg") left top/100% 100% no-repeat; 
	    }
	    
	    .my-uploadImg {
	    	width:120px;
	    	height:120px;
	    }
	    
	    .layui-layer-dialog .layui-layer-content {
			color:black;
		}
	    
    </style>
</head>
<body>
 <div class="simple-nav w-1200 margin-0-auto reg-nav">
    <img class="fl reg-logo" src="${ctx }/res/img/icon/reg-logo.png">
    <span class="fr text-black f12">我已经注册,现在就<a class="text-red" href="${ctx }/user/login">登录</a></span>
</div>
<div class="reg-body w-1200 margin-0-auto">
    <div class="reg-step clear">
        <div class="clear margin-0-auto dis-table">
        <span class="active step-item" style="z-index:100;">
            <span class="info-text">完善信息</span>
            <span class="bar"></span>
        </span>
        <span class="step-item" style="z-index:101;">
            <span class="info-text">线上/线下缴费</span>
            <span class="bar"></span>
        </span>
        <span class="step-item" style="z-index:102;">
            <span class="info-text">待审核</span>
            <span class="bar"></span>
        </span>
        <span class="step-item" style="z-index:103;">
            <span class="info-text">注册完成</span>
        </span>
        </div>
    </div>
     <form id='registerForm' method="post">
	    <div class="form-groups">
	        <h3 class="form-groups-title">账户信息</h3>
	        <div class="form-controller">
	            <label class="form-label icon-required">用户名:</label>
	            <input class="form-input" required name="username">
	        </div>
	        <div class="form-controller">
	            <label class="form-label icon-required">登录密码:</label>
	            <input type="password" name="password" class="form-input" required>
	        </div>
	        <div class="form-controller">
	            <label class="form-label icon-required">确认密码:</label>
	            <input type="password" name="passwordConfirm" class="form-input" required>
	        </div>
	    </div>
	    <div class="form-groups">
	        <h3 class="form-groups-title">联系人信息</h3>
	        <div class="form-controller">
	            <label class="form-label icon-required">联系人姓名:</label>
	            <input class="form-input" name="realName" required>
	        </div>
	        <div class="form-controller">
	            <label class="form-label icon-required">手机号码:</label>
	            <input class="form-input" name="mobile" required>
	        </div>
	        <div class="form-controller">
	            <label class="form-label icon-required">联系人邮箱:</label>
	            <input class="form-input" name="email" required>
	        </div>
	    </div>
	    <div class="form-groups">
	        <h3 class="form-groups-title">公司信息</h3>
	        <div class="form-controller">
	            <label class="form-label icon-required">公司名称:</label>
	            <input class="form-input" name="companyName" required>
	        </div>
	        <div class="form-controller">
	            <label class="form-label icon-required">公司所在地:</label>
	            <select class="form-input" name="province.id" id="provinceId" required>
	            	<option value="">请选择省份</option>
	                <c:forEach items="${provinces }" var="p">
						<option value="${p.id }">${p.name }</option>
					</c:forEach>
	            </select>
	            <select class="form-input" name="city.id" id="cityId" required>
	                <option value="">请选择城市</option>
	            </select>
	            <select class="form-input" name="district.id" id="districtId">
	                <option value="">请选择区县</option>
	            </select>
	        </div>
	        <div class="form-controller">
	            <label class="form-label icon-required">公司注册地址:</label>
	            <input class="form-input" name="registerAddress" required>
	        </div>
	        <div class="form-controller">
	            <label class="form-label icon-required">公司办公地址:</label>
	            <input class="form-input" name="officeAddress" required>
	        </div>
	        <div class="form-controller">
	            <label class="form-label icon-required">销售类型:</label>
	            <input class="form-input"name="saleType" required>
	        </div>
	        <div class="form-controller">
	            <label class="form-label">公司网址:</label>
	            <input class="form-input" name="website">
	        </div>
	        <div class="form-controller">
	            <label class="form-label">公司人数:</label>
	            <select class="form-input" name="companySize">
	                <option value="">请选择</option>
	                <option value="100以下">100人以下</option>
	                <option value="100以上">100人以上</option>
	            </select>
	        </div>
	        <div class="form-controller">
	            <label class="form-label">公司行业:</label>
	            <select class="form-input" name="industry">
	                <option>请选择</option>
	                <option value="家装">家装</option>
	            </select>
	        </div>
	        <div class="form-controller">
	            <label class="form-label">公司性质:</label>
	            <select class="form-input" name="nature">
	                <option>请选择</option>
	                <option value="家装">家装</option>
	            </select>
	        </div>
	        <div class="form-controller">
	            <label class="form-label icon-required" id="images">证件上传:</label>
	              <label class="upload form-input" id="imageLabel">
	             <input type="file" onchange="onImageUploade(this)">
	             </label>
	             <div class="input-remark">请将营业执照、组织机构代码证、税务登记证、一般纳税人证明、开户许可证、 开票信息及法人身份证的电子版上传（附件请不要超过10M)</div>
	        </div>
	        <div class="form-controller">
	            <label class="form-label">备注:</label>
	            <textarea class="form-input remark" maxlength="100" rows="30" cols="50" style="width: 300px;height: 100px;" name="remarks"></textarea>
	        </div>
	        <div class="form-controller">
	            <label class="form-label icon-required">验证码:</label>
	            <input class="form-input input-xs" required name="valiCode">
	            <img class="form-input-addon" src="${ctx }/validateCode/get" style="cursor:pointer;" title="点击更换验证码" onclick="changeVali(this);" id="valiCodeImg">
	            <div ><a style="color:blue;font-size:9px;vertical-align:bottom;text-decoration:underline;cursor:pointer;margin-left:10px" onclick="changeVali(this);">看不清楚？换一张试试</a></div>
	        </div>
	        <div class="form-controller">
	            <label class="form-label">&nbsp;</label>
	            <button class=" btn btn-primary submit" onclick="return form_submit();">同意协议并注册</button>
	        </div>
	    </div>
    </form>
</div>
<div class="login-foot w-1200 margin-0-auto">
    <div class="links">
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
        <a href="#">法律声明</a>
        <a href="#">人才招聘</a>
        <a href="#">手机欧工</a>
        <a href="#">友情链接</a>
        <a href="#">English Site</a>
    </div>
    <div class="copyright">Copyright © 2016 ogmall.com 欧工国际软装 版权所有</div>
</div><script type="text/javascript" src="${ctx }/res/js/lib.js"></script>
<script type="text/javascript" src="${ctx }/res/js/plugins.js"></script>
<script type="text/javascript" src="${ctx }/res/js/modules.js"></script>
<script src="${ctx }/res/hplus/js/plugins/layer/layer.min.js"></script>
<script type="text/javascript">


function onImageUploade(input) {
	var fd = new FormData();
	fd.append("image", input.files[0]);
	
	$.ajax({
		url: "${ctx}/image/upload7",
		type: "POST",
		processData: false,
		contentType: false,
		data: fd,
		success: function(imageUrl) {
			var image = '<image class="my-uploadImg" src="' + imageUrl + '"/>';
			$('#imageLabel').after(image);
		}
	});
}

function changeVali(obj) {
	$("#valiCodeImg").attr('src','${ctx }/validateCode/get?'+new Date().getTime());
}

$('#provinceId').change(function() {
	var provinceId = $(this).val();
	$('#cityId').html('');
	$('#districtId').html('');
	if (provinceId != '') {
		$.ajax({
			url: "${ctx}/user/findArea?provinceId=" + provinceId,
			dataType: "json",
			success: function(array) {
				$('#cityId').append('<option value="">城市</option>');
				for (var i = 0; i < array.length; i++) {
					var obj = array[i];
					var option = '<option value="' + obj.id + '">' + obj.name + '</option>';
					$('#cityId').append(option);	
				}
			}
		});
	}
	
});

$('#cityId').change(function() {
	var cityId = $(this).val();
	$('#districtId').html('');
	if (cityId != '') {
		$.ajax({
			url: "${ctx}/user/findArea?cityId=" + cityId,
			dataType: "json",
			success: function(array) {
				$('#districtId').append('<option value="">地区</option>');
				for (var i = 0; i < array.length; i++) {
					var obj = array[i];
					var option = '<option value="' + obj.id + '">' + obj.name + '</option>';
					$('#districtId').append(option);	
				}
			}
		});
	}
});

function form_submit() {
	var arr = new Array();
	$('#images').parent().find('img').each(function() {
		arr.push($(this).attr('src'));
	});
	var images = arr.join(',');
	info = $('#registerForm').serializeArray();
	var json = {};
	for(var i = 0;i < info.length; i ++ ) {
		var theArr = info[i];
		var key = theArr.name;
		var value = theArr.value;
		json[key] = value;
	} 
	json["images"] = images;
	$.ajax({
		url: "${ctx}/user/doCompanyRegister",
		data:json,
		dataType: "json",
		type: "get",
		success: function(data) {
			if (data.success) {
				//loading带文字
				layer.msg('提交成功，正在进行跳转...',{time: 5000, icon:6,shade: [0.5, '#f5f5f5']});
				location.href = '${ctx}/user/goNextStep?registerType=factory&step=2';
			} else {
				layer.alert(data.msg,{icon:2,skin: 'layer-ext-moon'});
			}
		}
	});
	return false;
}

    $(document).ready(function(){
        $('.bxslider').bxSlider({
            preloadImages:'all',
            auto:true
        });
    }); 
    
</script>
</body>
</html>